// import React,{useEffect,useState} from 'react'
// import { useLocation } from 'react-router-dom'
// import { Image } from 'react-vant';

// interface DETILEDATATYPE{
//   user?: string,
//   id?: string,
//   img?: string,
//   title?: string
// }

// export default function Detile() {
//   const location = useLocation()

//   const [detData,setdetData] = useState<DETILEDATATYPE>({})

//   useEffect(()=>{
//     setdetData(location.state as DETILEDATATYPE)
//   },[detData])

//   // useEffect(()=>{
//   //   console.log(detData,'detData');

//   // },[])

//   return (
//     <div>
//       <div className="demo-image">
//         <Image width="100" height="100" src={detData.img} />
//       </div>
//     </div>
//   )
// }



import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { CartO, ChatO } from '@react-vant/icons';
import { ActionBar } from 'react-vant';
import { Image } from 'react-vant';
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { ADDLIST, ALLACTION, ALLSTATE } from '../../types/store.d'
import { Toast, NavBar } from 'react-vant';
interface DETILEDATATYPE {
  user?: string,
  id?: string,
  img?: string,
  title?: string
  isCheck?:boolean
}


export default function Detile() {
  const location = useLocation()
  const navigate = useNavigate()

  const [DataList, setDataList] = useState<DETILEDATATYPE>({})
  const dispatch = useDispatch()
  useEffect(() => {
    setDataList(location.state as DETILEDATATYPE)
  }, [])
  useEffect(() => {

  }, [DataList])

  const handlAddcarList = () => {
    console.log(111);
    dispatch({
      type: ADDLIST,
      payload: DataList,
    })

  }

  const carnum = useSelector((state: ALLSTATE) => {
    return state.carlist.length
  })
  
  const timer = setTimeout(() => {
    navigate('/home/car')
    clearTimeout(timer)
  }, 5000)

  return (
    <div>
      <NavBar
      title="标题"
      leftText="返回"
      rightText="按钮"
      onClickLeft={() => navigate(-1)}
      onClickRight={() => Toast('按钮')}
    />
      <div className="demo-image">
        <Image width="100" height="100" src={DataList.img} />
        <p>{DataList.user}</p>
      </div>



      <div className='demo-action-bar'>
        <ActionBar>
          <ActionBar.Icon icon={<ChatO />} badge={{ content: carnum }} text="客服" />
          <ActionBar.Icon icon={<CartO />} text="购物车" />
          <ActionBar.Button color="#be99ff" type="warning" onClick={() => handlAddcarList()} text="加入购物车" />
          <ActionBar.Button color="#7232dd" type="danger" text="立即购买" />
        </ActionBar>
      </div>
    </div>
  )
}
